<template>
   
  <div class="screen-container">
       
    <header class="screen-header">
                  <span class="title">电商平台实时监控系统</span>      
      <div class="title-right">
            <span class="datetime">2049-01-01 00:00:00</span>      
      </div>
         
    </header>
       
    <div class="screen-body">
           
      <section class="screen-left">
               
        <div
          id="left-top"
          :class="[fullScreenStatus.trend ? 'fullscreen' : '']"
        >
                   <!-- 销量趋势图表 -->
          <Trend ref="trend"></Trend>
          <div :class="[
                fullScreenStatus.trend ? 'bigsize' : 'resize',
              ]">
                   
            <span
              :class="[
                fullScreenStatus.trend ? 'el-icon-zoom-out' : 'el-icon-zoom-in',
              ]"
              @click="changeSize('trend')"
            ></span>
               
          </div>
                 
        </div>
               
        <div
          id="left-bottom"
          :class="[fullScreenStatus.seller ? 'fullscreen' : '']"
        >
                   <!-- 商家销售金额图表 -->
          <Seller ref="seller"></Seller>
          <div :class="[
                fullScreenStatus.seller ? 'bigsize' : 'resize',
              ]">
                   
            <span
              :class="[
                fullScreenStatus.seller ? 'el-icon-zoom-out' : 'el-icon-zoom-in',
              ]"
              @click="changeSize('seller')"
            ></span>
               
          </div>
               
        </div>
             
      </section>
           
      <section class="screen-middle">
               
        <div
          id="middle-top"
          :class="[fullScreenStatus.map ? 'fullscreen' : '']"
        >
                   <!-- 商家分布图表 -->
          <Map ref="map"></Map>
          <div :class="[
                fullScreenStatus.map ? 'bigsize' : 'resize',
              ]">
                   
            <span
              :class="[
                fullScreenStatus.map ? 'el-icon-zoom-out' : 'el-icon-zoom-in',
              ]"
              @click="changeSize('map')"
            ></span>
               
          </div>
               
        </div>
               
        <div
          id="middle-bottom"
          :class="[fullScreenStatus.rank ? 'fullscreen' : '']"
        >
                   <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div :class="[
                fullScreenStatus.rank ? 'bigsize' : 'resize',
              ]">
                   
            <span
              :class="[
                fullScreenStatus.rank ? 'el-icon-zoom-out' : 'el-icon-zoom-in',
              ]"
              @click="changeSize('rank')"
            ></span>
               
          </div>
                 
        </div>
             
      </section>
           
      <section class="screen-right">
               
        <div
          id="right-top"
          :class="[fullScreenStatus.hot ? 'fullscreen' : '']"
        >
                   <!-- 热销商品占比图表 -->
          <Hot ref="hot"></Hot>
          <div :class="[
                fullScreenStatus.hot ? 'bigsize' : 'resize',
              ]">
                   
            <span
              :class="[
                fullScreenStatus.hot ? 'el-icon-zoom-out' : 'el-icon-zoom-in',
              ]"
              @click="changeSize('hot')"
            ></span>
               
          </div>
                 
        </div>
               
        <div
          id="right-bottom"
          :class="[fullScreenStatus.stock ? 'fullscreen' : '']"
        >
                   <!-- 库存销量分析图表 -->
          <Stock ref="stock"></Stock>
          <div :class="[
                fullScreenStatus.stock ? 'bigsize' : 'resize',
              ]">
                   
            <span
              :class="[
                fullScreenStatus.stock ? 'el-icon-zoom-out' : 'el-icon-zoom-in',
              ]"
              @click="changeSize('stock')"
            ></span>
               
          </div>
                 
        </div>
             
      </section>
         
    </div>
     
  </div>
</template>

<script>
import Trend from "@/components/TrendPage";
import Seller from "@/components/Seller";
import Map from "@/components/MapPage";
import Rank from "@/components/RankPage";
import Hot from "@/components/HotPage";
import Stock from "@/components/StockPage";
export default {
  data() {
    return {
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false,
      },
    };
  },
  components: {
    Seller,
    Stock,
    Trend,
    Map,
    Hot,
    Rank,
  },
  methods: {
    //改变组件大小
    changeSize(chartName) {    
      // 先得到目标状态
      console.log(chartName);
      const targetValue = !this.fullScreenStatus[chartName];
      console.log(targetValue);
       // 将所有的图表设置为非全屏
     Object.keys(this.fullScreenStatus).forEach((item) => {
        console.log(item);
         this.fullScreenStatus[item] = false;
       });
       console.log(this.fullScreenStatus);

      // 将目标图表设置为目标状态
      this.fullScreenStatus[chartName] = targetValue;
      console.log(this.fullScreenStatus);
       this.$nextTick(() => {
         this.$refs[chartName].screenAdapter();
       });
    },
  },
};
</script>

<style lang="less" scoped>
.resize {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}
.bigsize {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  font-size: 30px;
}
.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #fbf9ec;
  color: #893448;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    font-weight: bold;
    transform: translate(-30%, -50%);
    color: #893448;
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      position: relative;
      height: 53%;
    }
    #left-bottom {
      position: relative;
      height: 31%;
      margin-top: 25px;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      position: relative;
      width: 100%;
      height: 56%;
    }
    #middle-bottom {
      position: relative;
      margin-top: 25px;
      width: 100%;
      height: 28%;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      position: relative;
      height: 46%;
    }
    #right-bottom {
      position: relative;
      height: 38%;
      margin-top: 25px;
    }
  }
}
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
  background-color: #fbf9ec;
}
</style>